import { Image, Table, QRCode, Popconfirm, Tag } from 'antd'
import type { DescriptionsProps } from 'antd'
import { ClockCircleOutlined } from '@ant-design/icons'
import './index.scss'
import apis from '@/apis'
import React, { useEffect, useState } from 'react'
const useMsgDom: React.FC = () => {
  const [infoData, setInfoData]: any = useState(null)
  useEffect(() => {
    async function queryInfo() {
      const res = await apis.getInfoApi()
      setInfoData(res)
    }
    queryInfo()
  }, [])

  // 个人基本信息
  const basicInfoItem: DescriptionsProps['items'] = [
    {
      key: '1',
      label: '本人照片',
      children: (
        <>
          <Image width={120} src={infoData && infoData.myImg} />
          <div style={{ color: '#aaa' }}>来自：国际SQ认证</div>
        </>
      ),
      span: 3,
    },
    {
      key: '2',
      label: '姓名',
      children: infoData && infoData.myInfo[0].defaultValue,
    },
    {
      key: '3',
      label: '性别',
      children: infoData && infoData.myInfo[1].defaultValue,
    },
    {
      key: '4',
      label: '籍贯',
      children: infoData && infoData.myInfo[2].defaultValue,
    },
    {
      key: '5',
      label: '学历',
      children: infoData && infoData.myInfo[3].defaultValue,
    },
    {
      key: '6',
      label: '工作年限',
      children: infoData && infoData.myInfo[4].defaultValue,
    },
    {
      key: '7',
      label: '联系方式',
      children: (
        <div>
          <span>{infoData && infoData.myInfo[5].defaultValue}/</span>
          <Popconfirm
            icon={false}
            title={false}
            showCancel={false}
            placement="right"
            description={
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                }}
              >
                <div>微信</div>
                <QRCode value={(infoData && infoData.QRurl) || '-'} />
                <div>If add, please add a remark, Thank you.</div>
              </div>
            }
            okButtonProps={{ style: { display: 'none' } }}
          >
            <span className="connection">微信</span>
          </Popconfirm>
        </div>
      ),
    },
    {
      key: '8',
      label: '求职岗位',
      children: infoData && infoData.myInfo[6].defaultValue,
      span: 3,
    },
    {
      key: '9',
      label: '在职状态',
      children: infoData && infoData.myInfo[7].defaultValue,
      span: 3,
    },
    {
      key: '10',
      label: '个人技能',
      children: (
        <div style={{ fontSize: 15 }}>
          <div
            dangerouslySetInnerHTML={{
              __html: infoData && infoData.personalSkillText,
            }}
          ></div>
        </div>
      ),
      span: 3,
    },
  ]
  // 工作经历-表头
  const workColumns = [
    {
      title: '公司名称',
      dataIndex: 'corporation',
      key: 'corporation',
      width: 120,
    },
    {
      title: '任职岗位',
      dataIndex: 'job',
      key: 'job',
      width: 100,
    },
    {
      title: '职责',
      dataIndex: 'Duty',
      key: 'Duty',
      render: (value: string[]) =>
        value.map((item, index) => <div key={index}>{item}</div>),
    },
  ]
  // 教育经历-表头
  const educationItem = [
    {
      title: '时间',
      dataIndex: 'date',
      key: 'date',
      width: 160,
    },
    {
      title: '学校名称',
      dataIndex: 'schoolName',
      key: 'schoolName',
      width: 140,
    },
    {
      title: '专业',
      dataIndex: 'profession',
      key: 'profession',
      width: 140,
    },
    {
      title: '层次',
      dataIndex: 'level',
      key: 'level',
      width: 140,
    },
  ]
  // 工作经历-DOM解构
  const workItem = [
    // {
    //   dot: (
    //     <ClockCircleOutlined
    //       className="timeline-clock-icon"
    //       style={{ fontSize: '18px' }}
    //     />
    //   ),
    //   color: 'red',
    //   label: (
    //     <div style={{ fontSize: 18 }}>
    //       {infoData && infoData.workInfo.DX.time}
    //     </div>
    //   ),
    //   children: (
    //     <div style={{ fontSize: 16 }}>
    //       {infoData && infoData.workInfo.DX.text}
    //     </div>
    //   ),
    // },
    // {
    //   key: '002',
    //   label: (
    //     <div style={{ fontSize: 18 }}>
    //       {infoData && infoData.workInfo.FL[0].time}
    //     </div>
    //   ),
    //   children: (
    //     <Table
    //       dataSource={infoData && infoData.workInfo.FL}
    //       pagination={false}
    //       columns={workColumns}
    //       bordered
    //     />
    //   ),
    // },
    // {
    //   dot: (
    //     <ClockCircleOutlined
    //       className="timeline-clock-icon"
    //       style={{ fontSize: '20px' }}
    //     />
    //   ),
    //   label: (
    //     <div style={{ fontSize: 18 }}>
    //       {infoData && infoData.workInfo.XX.time}
    //     </div>
    //   ),
    //   children: (
    //     <div style={{ fontSize: 16 }}>
    //       {infoData && infoData.workInfo.XX.text}
    //     </div>
    //   ),
    // },
    {
      label: (
        <div style={{ fontSize: 18 }}>
          {infoData && infoData.workInfo.BY[0].time}
        </div>
      ),
      children: (
        <Table
          dataSource={infoData && infoData.workInfo.BY}
          pagination={false}
          columns={workColumns}
          bordered
        />
      ),
    },
    {
      dot: (
        <ClockCircleOutlined
          className="timeline-clock-icon"
          style={{ fontSize: '20px' }}
        />
      ),
      color: 'green',
      label: (
        <div style={{ fontSize: 18 }}>
          {infoData && infoData.workInfo.HT[0].time}
        </div>
      ),
      children: (
        <Table
          dataSource={infoData && infoData.workInfo.HT}
          pagination={false}
          columns={workColumns}
          bordered
        />
      ),
    },
  ]
  // 项目经验-表头
  const projectItem = [
    {
      key: 'num',
      title: '序号',
      dataIndex: 'key',
      width: 70,
      align: 'center',
    },
    {
      key: 'projectName',
      title: '项目名称',
      dataIndex: 'projectName',
      width: 200,
      align: 'center',
    },
    {
      key: 'projectType',
      title: '项目类型',
      dataIndex: 'projectType',
      width: 90,
      align: 'center',
      render: (value: string) => {
        if (value === 'H5') {
          return <Tag color="#f50">{value}</Tag>
        } else if (value === 'PC') {
          return <Tag color="#2db7f5">{value}</Tag>
        } else {
          return <Tag color="#87d068">{value}</Tag>
        }
      },
    },
    {
      key: 'corporation',
      title: '所属公司',
      dataIndex: 'corporation',
      width: 120,
      align: 'center',
    },
    {
      key: 'projectDescription',
      title: '项目描述',
      dataIndex: 'projectDescription',
      width: 300,
      align: 'center',
    },
    {
      key: 'TechnologyStack',
      title: '技术栈',
      dataIndex: 'TechnologyStack',
      width: 180,
      align: 'center',
      render: (value: string[] | string) => {
        if (value === 'H5') {
          return (
            <Popconfirm
              icon={false}
              title={false}
              showCancel={false}
              placement="top"
              description={
                <div>{infoData && infoData.projectdata[0].TechnologyStack}</div>
              }
              okButtonProps={{ style: { display: 'none' } }}
            >
              <span className="connection">同和泰人寿官微</span>
            </Popconfirm>
          )
        } else if (value === 'PC') {
          return (
            <Popconfirm
              icon={false}
              title={false}
              showCancel={false}
              placement="top"
              description={
                <div>{infoData && infoData.projectdata[4].TechnologyStack}</div>
              }
              okButtonProps={{ style: { display: 'none' } }}
            >
              <span className="connection">同和泰统一管理平台</span>
            </Popconfirm>
          )
        } else if (value === '小程序') {
          return (
            <Popconfirm
              icon={false}
              title={false}
              showCancel={false}
              placement="top"
              description={
                <div>{infoData && infoData.projectdata[2].TechnologyStack}</div>
              }
              okButtonProps={{ style: { display: 'none' } }}
            >
              <span className="connection">同全民保险计划小程序</span>
            </Popconfirm>
          )
        } else {
          return value
        }
      },
    },
    ,
    {
      key: 'projectDuty',
      title: '项目职责',
      dataIndex: 'projectDuty',
      render: (value: string[] | string) => {
        if (value === 'T') {
          return (
            <Popconfirm
              icon={false}
              title={false}
              showCancel={false}
              placement="top"
              description={
                infoData &&
                infoData.projectdata[0].projectDuty.map((item, index) => (
                  <div key={index}>{item}</div>
                ))
              }
              okButtonProps={{ style: { display: 'none' } }}
            >
              <span className="connection">同和泰人寿官微</span>
            </Popconfirm>
          )
        } else {
          return value.map((item, index) => <div key={index}>{item}</div>)
        }
      },
    },
  ]

  return {
    basicInfoItem,
    educationItem,
    workItem,
    projectItem,
    infoData,
  }
}
export default useMsgDom
